<template>
	<div v-if="!logon" class="LoginRegistration bold">
		<!-- 如果没有登陆显示 -->
		<div class="center" style="color: #555" @click=";(centerDialogVisible = true), key++">登录</div>
		<router-link class="center" to="/register">注册</router-link>
		<!-- <div class="center" @click="centerDialogVisible = true">注册</div> -->
	</div>
	<!-- 登录后 -->
	<div v-else class="Afterloggingin positioned center">
		<div class="Headcircle">
			<el-avatar class="Roundheadportrait" :size="60" v-if="user" :src="user.Avatar">
				<div class="image-slot iconfont icon-setting-role"></div>
			</el-avatar>
			<el-avatar v-else class="Roundheadportrait" :size="60">
				<div class="image-slot iconfont icon-setting-role"></div>
			</el-avatar>
			<!-- <img src="./../assets/img/avatar.png" alt="" class="Roundheadportrait" /> -->
			<div class="iconfont icon-renzhengguanli authentication YellowLabelCertification"></div>
		</div>
		<!-- Genericpadding 宽度要重新定义 -->
		<div class="Popupafterlogin">
			<div class="Popupafterlogins columnLayout interval">
				<div class="dropdown-box"></div>
				<div class="dropdown-boxr"></div>
				<div class="Horizontalspacing minaxgap zindex">
					<div class="Headcircle">
						<el-avatar class="Roundheadportrait" :size="60" v-if="user" :src="user.Avatar">
							<div class="image-slot iconfont icon-setting-role"></div>
						</el-avatar>
						<el-avatar v-else class="Roundheadportrait" :size="60">
							<div class="image-slot iconfont icon-setting-role"></div>
						</el-avatar>
						<!-- <img src="./../assets/img/avatar.png" alt="" class="Roundheadportrait" />  -->
					</div>
					<span class="center">{{ user.username }}</span
					><span class="center Whitebox minifont Green padding5">{{ user.name }}</span>
				</div>
				<div class="Whitebox padding10 grey minfont articlebt">
					<div class="Horizontalspacing minxgap"
						><span>余额:</span><span>${{ user.balance }}</span></div
					>
					<div class="Horizontalspacing minxgap"
						><span>学分:</span><span>{{ user.integral }}</span></div
					>
				</div>
				<el-button type="primary" @click="center()">{{ $t('message.PersonalCenter') }}</el-button>

				<div class="Whitebox padding20 grey minfont Horizontalspacing space-around zindex">
					<router-link :to="'/homepage/' + user.id">主頁</router-link>
					<router-link to="/user/settings">資料</router-link>
					<p class="turngreen" @click="exit">退出</p>
				</div>
			</div>
		</div>
	</div>
	<loginbox v-if="centerDialogVisible" :key="key"></loginbox>
</template>
<script>
	import loginbox from '@/components/loginbox'
	import { mapState } from 'vuex'
	import { Logoutoflogin } from '@/api/api'
	export default {
		name: 'name',
		computed: {
			...mapState(['logon', 'user']),
		},
		components: {
			// 组件
			loginbox,
		},
		data() {
			return {
				key: 0,
				// 账号密码
				account: '',
				password: '',
				centerDialogVisible: false,
				form: {
					account: '',
					password: '',
				},
				rules: {
					account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
					password: [{ required: true, message: '请输入密码', trigger: 'change' }],
				},
			}
		},
		methods: {
			register() {
				this.$router.push('/register')
				this.centerDialogVisible = false
			},
			center() {
				this.$router.push('/user')
			},

			// 退出登陆
			async exit() {
				await Logoutoflogin()
			},

			// 获取钱包签名
			// gitub
		},
		mounted() {
			this.form.account = ''
			this.form.password = ''
		},
	}
</script>
<style>
	.loginbox .el-dialog__body {
		padding-bottom: 0px !important;
	}
	.loginbox .el-dialog__footer {
		padding-top: 0 !important;
	}
</style>
<style scoped>
	.loginnnk {
		width: 20px;
		height: 20px;
	}
	.Roundheadportrait .image-slot {
		font-size: 20px;
	}
</style>
<!-- https://github.com/WTFAcademy/WTF-Ethers/tree/main/ET02_SignInWithEthereum -->
<!-- "access_token=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&scope=user&token_type=bearer" -->
<!-- "access_token=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&scope=user&token_type=bearer" -->
<!-- id
:
151570489 -->
